<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <meta charset="utf-8">
    <title>安全协议设计工具</title>

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">

    <link rel="stylesheet" type="text/css" href="css/identify.css"/>
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css/account.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/control_index.css"/>
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
    <link rel="stylesheet" type="text/css" href="css/myProtocol.css"/>
    <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>


    <script src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/haidao.offcial.general.js"></script>
    <script type="text/javascript" src="js/select.js"></script>
    <script type="text/javascript" src="js/haidao.validate.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/service.js"></script>
    <script src="zTree_v3/js/jquery.ztree.all.js"></script>
    <script src="zTree_v3/js/jquery.ztree.exhide.js"></script>
    <script type="text/javascript" src="js/designProtocol.js"></script>
    <script type="text/javascript" src="js/addProtocolDesign.js"></script>

    <script>



        var count=8888;
        /*设置*/
        var setting = {
            async:{
                enable:false
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
                editNameSelectAll: true,
                drag:{
                    isMove:false,
                    isCopy:false
                }
            },
            check: {
                enable: false,
                chkDisabledInherit: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                },
                keep: {
                    //始终是叶子节点 isParent :false
                    leaf: true,
                    //始终是父节点 isParent :true
                    parent: true
                }
            },
            view: {
                showIcon: false,
                fontCss: getFont,
                dblClickExpand: dblClickExpand,
                selectedMulti:false,
                autoCancelSelected:false

            },
            callback: {
                onClick: clickEvent
            },
            key: {
                isParent: "parent"
            }
        };

        /*协议节点关系*/
        var myPro = [{id: 1, pid: 0, name: "DNP3", open: true, "chkDisabled": true, fieldType: "root"},
            {id: 2, pid: 1, name: "起始字0x05", fieldType: "fixedField"},
            {id: 3, pid: 1, name: "起始字0x64", fieldType: "fixedField"},
            {id: 4, pid: 1, name: "长度", fieldType: "fixedField"},

            {id: 5, pid: 1, name: "链路控制字", isParent: true, fieldType: "fixedField"},
            {id: 51, pid: 5, name: "DIR", fieldType: "fixedField"},
            {id: 52, pid: 5, name: "PRM", fieldType: "fixedField"},
            {id: 53, pid: 5, name: "FCB", fieldType: "fixedField"},
            {id: 54, pid: 5, name: "FCV/DFC", fieldType: "fixedField"},
            {id: 55, pid: 5, name: "FUCTION CODE", fieldType: "fixedField"},

            {id: 6, pid: 1, name: "目的地址", fieldType: "fixedField"},
            {id: 7, pid: 1, name: "源地址", fieldType: "fixedField"},
            {id: 8, pid: 1, name: "CRC校验", fieldType: "fixedField"},

            {id: 9, pid: 1, name: "DNP3传输层报头", isParent: true, fieldType: "fixedField"},
            {id: 91, pid: 9, name: "FIN", fieldType: "fixedField"},
            {id: 92, pid: 9, name: "FIR", fieldType: "fixedField"},
            {id: 92, pid: 9, name: "序号", fieldType: "fixedField"},

            {id: 10, pid: 1, name: "DNP3应用层报头", isParent: true, fieldType: "fixedField"},

            {id: 101, pid: 10, name: "应用层控制", isParent: true, fieldType: "fixedField"},
            {id: 1011, pid: 101, name: "FIN", fieldType: "fixedField"},
            {id: 1012, pid: 101, name: "FIR", fieldType: "fixedField"},
            {id: 1013, pid: 101, name: "CON", fieldType: "fixedField"},
            {id: 1014, pid: 101, name: "序号", fieldType: "fixedField"},

            {id: 102, pid: 10, name: "功能码", isParent: true, fieldType: "fixedField",open:true},

            {id: 11, pid: 1, name: "用户数据", fieldType: "fixedField"}

        ];


        //节点属性
        var treeNodeName="";
        var treeNodeDescription="";
        var treeNodeFuncType="";
        var treeNodeFieldType="";


        function clickEvent(event, treeId, treeNode,clickFlag) {
            clickFlag=1;
            event.ctrlKey=false;
            event.metaKey=false;


            var treeObj = $.fn.zTree.getZTreeObj("myDemo");
            treeNode.selectedMulti=false;

            if(treeNode.name!=undefined){
                treeNodeName=treeNode.name;
            }else{
                treeNodeName="";
            }

            if(treeNode.description!=undefined){
                treeNodeDescription=treeNode.description;
            }else{
                treeNodeDescription="";
            }

            if(treeNode.funcType!=undefined){
                treeNodeFuncType=treeNode.funcType;
            }else{
                treeNodeFuncType="";
            }

            if(treeNode.fieldType!=undefined){
                treeNodeFieldType=treeNode.fieldType;
            }



            $("#fieldArea").empty();
            var fieldAreaHtml = "  <div class=\"fieldDesign\">\n" +
                "                            <label for=\"fieldName\" class=\"control-label\"><span style=\"color: red;\">*</span>字段名称：</label>\n" +
                "                            <input type=\"text\" name=\"fieldName\" id=\"fieldName\" maxlength='10' value=\""+treeNodeName+"\" placeholder=\"必填项(字数不超过10)\">\n" +
                "                        </div>\n" +
                "                        <div class=\"fieldDesign\">\n" +
                "                            <label for=\"description\" class=\"control-label\">字段说明：</label>\n" +
                "                            <input type=\"text\" name=\"description\" id=\"description\" maxlength='20' value=\""+treeNodeDescription+"\" placeholder=\"选填项(字数不超过20)\">\n" +
                "                        </div>\n" +
                "                        <div class=\"fieldDesign\">\n" +
                "                            <label for=\"funcType\" class=\"control-label\"><span style=\"color: red;\">*</span>功能类型：</label>\n" +
                "                            <select id=\"funcType\">\n" +
                "                                <option value=\"null\" disabled selected id=\"null\" >请选择字段的功能类型</option>\n" +
                "                                <option value=\"encryTag\" id=\"encryTag\">加密标识字段</option>\n" +
                "                                <option value=\"encryAlgField\" id=\"encryAlgField\">加密方法字段</option>\n" +
                "                                <option value=\"encryAreaField\" id=\"encryAreaField\">加密区域字段</option>\n" +
                "                                <option value=\"encryModel\" id=\"encryModel\">加密模式字段</option>\n" +
                "                                <option value=\"encryOutputField\" id=\"encryOutputField\">加密输出字段</option>\n" +
                "                                <option value=\"encryResField\" id=\"encryResField\">加密结果字段</option>\n" +
                "                                <option value=\"virusTag\" id=\"virusTag\">防病毒标识字段</option>\n" +
                "                                <option value=\"virusMethodField\" id=\"virusMethodField\">防病毒方法字段</option>\n" +
                "                                <option value=\"IntegrityTag\" id=\"IntegrityTag\">完整性标识字段</option>\n" +
                "                                <option value=\"IntegrityValField\" id=\"IntegrityValField\">完整性校验值字段</option>\n" +
                "                                <option value=\"IntegrityMethodField\" id=\"IntegrityMethodField\">完整性校验方法字段</option>\n" +
                "                                <option value=\"IntegrityResField\" id=\"IntegrityResField\">完整性校验结果字段</option>\n" +
                "                                <option value=\"exceptionTag\" id=\"exceptionTag\">异常标识字段</option>\n" +
                "                                <option value=\"exceptionMethodField\" id=\"exceptionMethodField\">异常检测方法字段</option>\n" +
                "                                <option value=\"exceptionValField\" id=\"exceptionValField\">异常检测值字段</option>\n" +
                "                                <option value=\"exceptionResField\" id=\"exceptionResField\">异常检测结果字段</option>\n" +
                "                                <option value=\"replayCheckField\" id=\"replayCheckField\">重放检测标识字段</option>\n" +
                "                                <option value=\"resendCheckField\" id=\"resendCheckField\">重传检测标识字段</option>\n" +
                "                                <option value=\"resendUniqueField\" id=\"resendUniqueField\">重传唯一性标识字段</option>\n" +
                "                                <option value=\"overtimeCheckField\" id=\"overtimeCheckField\">超时检测标识字段</option>\n" +
                "                                <option value=\"communicationResField\" id=\"communicationResField\">通信状态指示位字段</option>\n" +
                "                                <option value=\"timeSignField\" id=\"timeSignField\">时间戳标识字段</option>\n" +
                "                                <option value=\"customFuncField\" id=\"customFuncField\">自定义功能字段</option>\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                        <div class=\"fieldDesign\">\n" +
                "                            <label for=\"fieldType\" class=\"control-label\">字段类型：</label>\n" +
                "                            <select id=\"fieldType\" disabled>\n" +
                "                                <option value=\"null\" selected>-----------------------------------</option>\n" +
                "                                <option value=\"fixedField\" id=\"fixedField\">协议固定字段(自动判定)</option>\n" +
                "                                <option value=\"customField\" id=\"customField\">推荐自定义字段(自动判定)</option>\n" +
                "                                <option value=\"userField\" id=\"userField\">用户自定义字段(自动判定)</option>\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                        <button class=\"fieldDesignButton\" id=\""+treeNode.id+"fieldBtn\"><i class=\"fa fa-arrow-right fa-1x\"></i> 确认\n" +
                "                        </button>";
            $("#fieldArea").append(fieldAreaHtml);

            switch (treeNodeFuncType) {
                case "encryTag":$("#encryTag").attr("selected", "selected"); break;
                case "encryAlgField":$("#encryAlgField").attr("selected", "selected"); break;
                case "encryAreaField":$("#encryAreaField").attr("selected", "selected"); break;
                case "encryModel":$("#encryModel").attr("selected", "selected"); break;
                case "encryOutputField":$("#encryOutputField").attr("selected", "selected"); break;
                case "encryResField":$("#encryResField").attr("selected", "selected"); break;
                case "virusTag":$("#virusTag").attr("selected", "selected"); break;
                case "virusMethodField":$("#virusMethodField").attr("selected", "selected"); break;
                case "IntegrityTag":$("#IntegrityTag").attr("selected", "selected"); break;
                case "IntegrityValField":$("#IntegrityValField").attr("selected", "selected"); break;
                case "IntegrityResField":$("#IntegrityResField").attr("selected", "selected"); break;
                case "IntegrityMethodField":$("#IntegrityMethodField").attr("selected", "selected"); break;
                case "exceptionTag":$("#exceptionTag").attr("selected", "selected"); break;
                case "exceptionMethodField":$("#exceptionMethodField").attr("selected", "selected"); break;
                case "replayCheckField":$("#replayCheckField").attr("selected", "selected"); break;
                case "resendCheckField":$("#resendCheckField").attr("selected", "selected"); break;
                case "exceptionResField":$("#exceptionResField").attr("selected", "selected"); break;
                case "resendUniqueField":$("#resendUniqueField").attr("selected", "selected"); break;
                case "overtimeCheckField":$("#overtimeCheckField").attr("selected", "selected"); break;
                case "communicationResField":$("#communicationResField").attr("selected", "selected"); break;
                case "timeSignField":$("#timeSignField").attr("selected", "selected"); break;
                case "customFuncField":$("#customFuncField").attr("selected", "selected"); break;
                default: $("#null").attr("selected", "selected");
            }

            if (treeNodeFieldType == "fixedField") {
                $("#fixedField").attr("selected", "selected");
                $("#description").attr("placeholder","协议固定字段,修改请慎重");
            } else if(treeNodeFieldType == "customField") {
                $("#description").attr("placeholder","推荐设计字段");
                $("#customField").attr("selected", "selected");
                $("#fieldType").css("color", "red");
            }else{
                $("#userField").attr("selected", "selected");
                $("#fieldType").css("color", "#9400D3");
                $("#description").attr("placeholder","用户自定义字段");
            }

            treeNodeName=$("#fieldName").val();
            treeNodeDescription=$("#description").val();
            treeNodeFuncType=$("#funcType option:selected").val();

            $("#"+treeNode.id+"fieldBtn").live("click", function () {

                treeNodeName=$("#fieldName").val();
                treeNodeDescription=$("#description").val();
                treeNodeFuncType=$("#funcType option:selected").val();
                if(!IsNotSpecialCharAndNotEmpty(treeNodeName)){
                    // alert("字段名称不能为空");
                    $("#fieldName").val("");
                    $("#fieldName").attr('placeholder',"不能含有特殊字符且不能为空");
                    if((treeNodeDescription.trim()!="")&&!IsSpecialChar(treeNodeDescription,"字段描述")){
                        //字段说明不能有特殊字符
                        $("#description").val("");
                        $("#description").attr('placeholder',"不能有特殊字符");
                    }
                    return false;
                }
                else if((treeNodeDescription.trim()!="")&&!IsSpecialChar(treeNodeDescription,"字段说明")){
                    //字段说明不能有特殊字符
                    $("#description").val("");
                    $("#description").attr('placeholder',"不能有特殊字符");
                }else if(treeNodeName.length>10){
                    // alert("字段名称字数不能超过10");
                    $("#fieldName").val("");
                    $("#fieldName").attr('placeholder',"字段名称字数不能超过10");
                    return false;
                } else if(treeNodeDescription.length>20){
                    // alert("字段说明字数不能超过20");
                    $("#description").val("");
                    $("#description").attr('placeholder',"字段说明字数不能超过20");
                    return false;
                }else{
                    treeNode.name = treeNodeName;
                    treeNode.description = treeNodeDescription;
                    treeNode.funcType = treeNodeFuncType;
                    treeObj.updateNode(treeNode);
                }
            });


        }

        function dblClickExpand(treeId, treeNode) {
            return treeNode.level > 0;
        }

        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }

        function identityFunc() {

            if(!AuthFalg){
                alert("认证协商已开启");
                auth={};
            }else {
                alert("认证协商已关闭");
                auth=null;
            }
            AuthFalg=!AuthFalg;
            myBtnClick("#identity");

        }

        function encrytionFunc() {
            if (!EncryFalg) {
                var treeObj = $.fn.zTree.getZTreeObj("myDemo");
                //根元素
                var root = treeObj.getNodeByParam("pid", "0");
                if (treeObj.getNodeByParam("name", "DNP3安全功能层") == null) {
                    //添加安全功能层
                    treeObj.addNodes(root, 9, {
                        id: (++count),
                        name: "DNP3安全功能层",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                var securityFunc = treeObj.getNodeByParam("name", "DNP3安全功能层");
                treeObj.addNodes(securityFunc,0, {
                    id: (++count),
                    name: "EPT",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"encry",
                    funcType:"encryTag"

                });

                if (treeObj.getNodeByParam("name", "用户自定义安全功能码") == null) {
                    //添加用户自定义安全功能码
                    treeObj.addNodes(securityFunc, 1, {
                        id: (++count),
                        name: "用户自定义安全功能码",
                        fieldType: "customField",
                        font: {"color": "red"},
                        isParent: true,
                        type:"templatePackage"
                    });
                }
                var userSecurity = treeObj.getNodeByParam("name", "用户自定义安全功能码");
                treeObj.addNodes(userSecurity, 3, {
                    id: (++count),
                    fieldType: "customField",
                    name: "加密方法",
                    font: {"color": "red"},
                    type:"encry",
                    funcType:"encryAlgField"
                });
                treeObj.addNodes(userSecurity, 1, {
                    id: (++count),
                    fieldType: "customField",
                    name: "加密模式",
                    font: {"color": "red"},
                    type:"encry",
                    funcType:"encryModel"
                });

                if (treeObj.getNodeByParam("name", "用户自定义扩展编码") == null) {
                    //添加用户自定义扩展编码
                    var funEncode = treeObj.getNodeByParam("name", "功能码");
                    treeObj.addNodes(funEncode, {
                        id: (++count),
                        name: "用户自定义扩展编码",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                //用户自定义扩展编码
                var userExtendCode = treeObj.getNodeByParam("name", "用户自定义扩展编码");
                treeObj.addNodes(userExtendCode, {
                    id: (++count),
                    name: "加密输出格式",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"encry",
                    funcType:"encryOutputField"
                });

                if(treeObj.getNodeByParam("name", "结果域")==null){
                    treeObj.addNodes(root, -1,{
                        id: (++count),
                        name: "结果域",
                        font: {"color": "red"},
                        type:"templatePackage",
                        isParent: true
                    });
                }

                var resNode=treeObj.getNodeByParam("name", "结果域");
                treeObj.addNodes(resNode,{
                    id: (++count),
                    name:"加密结果字段",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"encry",
                    funcType:"encryResField",
                    isParent:false
                });

                encry={};
                EncryFalg = !EncryFalg;
            } else {
                var treeObj = $.fn.zTree.getZTreeObj("myDemo");
                var encryList=treeObj.getNodesByParam("type","encry");

                for(var i=0;i<encryList.length;i++){
                    treeObj.removeNode(encryList[i]);
                }

                for(var n=2;n>0;n--){
                    var templatePackageList=treeObj.getNodesByParam("type","templatePackage");
                    for(var j=0;j<templatePackageList.length;j++){
                        if(templatePackageList[j].children.length==0){
                            treeObj.removeNode(templatePackageList[j]);
                        }
                    }
                }

                //合上包
                var fieldTypeList=treeObj.getNodesByParam("fieldType","fixedField");
                for(var k=0;k<fieldTypeList.length;k++){
                    if(fieldTypeList[k].isParent){
                            fieldTypeList[k].open=false;
                            treeObj.updateNode(fieldTypeList[k]);
                    }
                }

                encry=null;
                EncryFalg = !EncryFalg;
            }
            myBtnClick($("#encryption"));


        }

        function exceptionFunc() {

            if (!ExceptionFlag) {
                var treeObj = $.fn.zTree.getZTreeObj("myDemo");
                //根元素
                var root = treeObj.getNodeByParam("pid", "0");

                if (treeObj.getNodeByParam("name", "DNP3安全功能层") == null) {
                    //添加安全功能层
                    treeObj.addNodes(root, 9, {
                        id: (++count),
                        name: "DNP3安全功能层",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                //添加异常检测相关节点
                var securityFunc = treeObj.getNodeByParam("name", "DNP3安全功能层");
                treeObj.addNodes(securityFunc,2 , {
                    id: (++count),
                    name: "AD",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"exception",
                    funcType:"exceptionTag"
                });

                if (treeObj.getNodeByParam("name", "用户自定义安全功能码") == null) {
                    //添加用户自定义安全功能码
                    treeObj.addNodes(securityFunc, 1, {
                        id: (++count),
                        name: "用户自定义安全功能码",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage",
                    });
                }
                var userSecurity = treeObj.getNodeByParam("name", "用户自定义安全功能码");
                treeObj.addNodes(userSecurity, 1, {
                    id: (++count),
                    name: "异常检测方法",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"exception",
                    funcType:"exceptionMethodField"
                });


                if (treeObj.getNodeByParam("name", "用户自定义扩展编码") == null) {
                    //添加用户自定义扩展编码
                    var funEncode = treeObj.getNodeByParam("name", "功能码");
                    treeObj.addNodes(funEncode, {
                        id: (++count),
                        name: "用户自定义扩展编码",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                var userExtendCode = treeObj.getNodeByParam("name", "用户自定义扩展编码");
                treeObj.addNodes(userExtendCode, {
                    id: (++count),
                    name: "异常检测值",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"exception",
                    funcType:"exceptionValField"
                });

                if(treeObj.getNodeByParam("name", "结果域")==null){
                    treeObj.addNodes(root, -1,{
                        id: (++count),
                        name: "结果域",
                        font: {"color": "red"},
                        type:"templatePackage",
                        isParent: true
                    });
                }

                var resNode=treeObj.getNodeByParam("name", "结果域");
                treeObj.addNodes(resNode,{

                    id: (++count),
                    name:"异常结果字段",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"exception",
                    funcType:"exceptionResField",
                    isParent:false
                });

                exception={};
                ExceptionFlag = !ExceptionFlag;
            } else {
                var treeObj = $.fn.zTree.getZTreeObj("myDemo");

                var exceptionList=treeObj.getNodesByParam("type","exception");
                for(var i=0;i<exceptionList.length;i++){
                    treeObj.removeNode(exceptionList[i]);
                }

                for(var n=2;n>0;n--){
                    var templatePackageList=treeObj.getNodesByParam("type","templatePackage");
                    for(var j=0;j<templatePackageList.length;j++){
                        if(templatePackageList[j].children.length==0){
                            treeObj.removeNode(templatePackageList[j]);
                        }
                    }
                }

                var fieldTypeList=treeObj.getNodesByParam("fieldType","fixedField");
                for(var k=0;k<fieldTypeList.length;k++){
                    if(fieldTypeList[k].isParent){
                            fieldTypeList[k].open=false;
                            treeObj.updateNode(fieldTypeList[k]);
                    }
                }
                exception=null;
                ExceptionFlag = !ExceptionFlag;
            }
            myBtnClick($("#exception"));


        }

        function defendFunc() {
            var treeObj = $.fn.zTree.getZTreeObj("myDemo");
            //根元素
            var root = treeObj.getNodeByParam("pid", "0");

            if (!DefendFalg) {
                if (treeObj.getNodeByParam("name", "用户自定义扩展编码") == null) {
                    //添加用户自定义扩展编码
                    var funEncode = treeObj.getNodeByParam("name", "功能码");
                    treeObj.addNodes(funEncode, {
                        id: (++count),
                        name: "用户自定义扩展编码",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                var userExtendCode = treeObj.getNodeByParam("name", "用户自定义扩展编码");
                treeObj.addNodes(userExtendCode, {
                    id: (++count),
                    name: "AT",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"virus",
                    funcType:"virusTag"
                });
                treeObj.addNodes(userExtendCode, {
                    id: (++count),
                    name: "防病毒方法",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"virus",
                    funcType:"virusMethodField"
                });
                virus={};
            } else {
                var virusList=treeObj.getNodesByParam("type","virus");

                for(var i=0;i<virusList.length;i++){
                    treeObj.removeNode(virusList[i]);
                }

                for(var n=2;n>0;n--){
                    var templatePackageList=treeObj.getNodesByParam("type","templatePackage");
                    for(var j=0;j<templatePackageList.length;j++){
                        if(templatePackageList[j].children.length==0){
                            treeObj.removeNode(templatePackageList[j]);
                        }
                    }
                }

                var fieldTypeList=treeObj.getNodesByParam("fieldType","fixedField");
                for(var k=0;k<fieldTypeList.length;k++){
                    if(fieldTypeList[k].isParent){
                            fieldTypeList[k].open=false;
                            treeObj.updateNode(fieldTypeList[k]);
                    }
                }
                virus=null;
            }
            DefendFalg = !DefendFalg;
            myBtnClick($("#defend"));
        }

        function resendFunc() {
            var treeObj = $.fn.zTree.getZTreeObj("myDemo");
            //根元素
            var root = treeObj.getNodeByParam("pid", "0");
            if(treeObj.getNodeByParam("name", "结果域")==null){
                treeObj.addNodes(root, -1,{
                    id: (++count),
                    name: "结果域",
                    font: {"color": "red"},
                    type:"templatePackage",
                    isParent: true
                });
            }

            var resNode=treeObj.getNodeByParam("name", "结果域");
            treeObj.addNodes(resNode,-1,{
                id: (++count),
                name: "重放检测标识字段",
                font: {"color": "red"},
                fieldType: "customField",
                type:"overTime",
                pType:"重放检测标志位",
                funcType:"replayCheckField"
            });

            treeObj.addNodes(resNode,-1,{
                id: (++count),
                name: "重传检测标识字段",
                font: {"color": "red"},
                fieldType: "customField",
                type:"overTime",
                pType:"重传检测标志位",
                funcType:"resendCheckField"
            });

            var treeObj = $.fn.zTree.getZTreeObj("myDemo");
            //根元素
            var root = treeObj.getNodeByParam("pid", "0");
            if(!ResendFalg){
                if(treeObj.getNodeByParam("pType","重传唯一性标识字段")==null){
                    treeObj.addNodes(root,-1,{
                        id: (++count),
                        name: "重传唯一性标识字段",
                        font: {"color": "red"},
                        fieldType: "customField",
                        type:"overTime",
                        pType:"重传唯一性标识字段",
                        funcType:"resendUniqueField"
                    });
                }

                if(treeObj.getNodeByParam("pType","超时检测标识字段")==null){
                    treeObj.addNodes(root,-1,{
                        id: (++count),
                        name: "超时检测标识字段",
                        font: {"color": "red"},
                        fieldType: "customField",
                        type:"overTime",
                        pType:"超时检测标识字段",
                        funcType:"overtimeCheckField"
                    });
                }

                if(treeObj.getNodeByParam("pType","通信状态指示位字段")==null){
                    treeObj.addNodes(root,-1,{
                        id: (++count),
                        name: "通信状态指示位字段",
                        font: {"color": "red"},
                        fieldType: "customField",
                        type:"overTime",
                        pType:"通信状态指示位字段",
                        funcType:"communicationResField"
                    });
                }

                if(treeObj.getNodeByParam("pType","时间戳标识字段")==null){
                    treeObj.addNodes(root,-1,{
                        id: (++count),
                        name: "时间戳标识字段",
                        font: {"color": "red"},
                        fieldType: "customField",
                        type:"overTime",
                        pType:"时间戳标识字段",
                        funcType:"timeSignField"
                    });
                }
                resend={};
            }else {
                var overTimeList=treeObj.getNodesByParam("type","overTime");
                for(var i=0;i<overTimeList.length;i++){
                    treeObj.removeNode(overTimeList[i]);
                }

                for(var n=2;n>0;n--){
                    var templatePackageList=treeObj.getNodesByParam("type","templatePackage");
                    for(var j=0;j<templatePackageList.length;j++){
                        if(templatePackageList[j].children.length==0){
                            treeObj.removeNode(templatePackageList[j]);
                        }
                    }
                }

                //取消
                resend=null;
            }
            ResendFalg=!ResendFalg;
            myBtnClick("#resend");
        }


        function integrityFunc() {
            var treeObj = $.fn.zTree.getZTreeObj("myDemo");
            //根元素
            var root = treeObj.getNodeByParam("pid", "0");

            if (!IntegrityFalg) {
                if (treeObj.getNodeByParam("name", "DNP3安全功能层") == null) {
                    //添加安全功能层
                    treeObj.addNodes(root, 9, {
                        id: (++count),
                        name: "DNP3安全功能层",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                var securityFunc = treeObj.getNodeByParam("name", "DNP3安全功能层");
                treeObj.addNodes(securityFunc, 1, {
                    id: (++count),
                    name: "IC",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"integrity",
                    funcType:"IntegrityTag"
                });

                if (treeObj.getNodeByParam("name", "用户自定义安全功能码") == null) {
                    //添加用户自定义安全功能码
                    treeObj.addNodes(securityFunc, 1, {
                        id: (++count),
                        name: "用户自定义安全功能码",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                var userSecurity = treeObj.getNodeByParam("name", "用户自定义安全功能码");
                treeObj.addNodes(userSecurity, 1, {
                    id: (++count),
                    name: "完整性校验方法",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"integrity",
                    funcType:"IntegrityMethodField"
                });
                if (treeObj.getNodeByParam("name", "用户自定义扩展编码") == null) {
                    //添加用户自定义扩展编码
                    var funEncode = treeObj.getNodeByParam("name", "功能码");
                    treeObj.addNodes(funEncode, {
                        id: (++count),
                        name: "用户自定义扩展编码",
                        font: {"color": "red"},
                        isParent: true,
                        fieldType: "customField",
                        type:"templatePackage"
                    });
                }
                //用户自定义扩展编码
                var userExtendCode = treeObj.getNodeByParam("name", "用户自定义扩展编码");
                treeObj.addNodes(userExtendCode, {
                    id: (++count),
                    name: "完整性校验值",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"integrity",
                    funcType:"IntegrityValField"
                });

                if(treeObj.getNodeByParam("name", "结果域")==null){
                    treeObj.addNodes(root, -1,{
                        id: (++count),
                        name: "结果域",
                        font: {"color": "red"},
                        type:"templatePackage",
                        isParent: true
                    });
                }
                var resNode=treeObj.getNodeByParam("name", "结果域");
                treeObj.addNodes(resNode,{
                    id: (++count),
                    name:"完整性校验结果字段",
                    font: {"color": "red"},
                    fieldType: "customField",
                    type:"integrity",
                    funcType:"IntegrityResField",
                    isParent:false
                });
                integrity={};
                IntegrityFalg = !IntegrityFalg;
            } else {

                var integrityList=treeObj.getNodesByParam("type","integrity");
                for(var i=0;i<integrityList.length;i++){
                    treeObj.removeNode(integrityList[i]);
                }

                for(var n=2;n>0;n--){
                    var templatePackageList=treeObj.getNodesByParam("type","templatePackage");
                    for(var j=0;j<templatePackageList.length;j++){
                        if(templatePackageList[j].children.length==0){
                            treeObj.removeNode(templatePackageList[j]);
                        }
                    }
                }
                var fieldTypeList=treeObj.getNodesByParam("fieldType","fixedField");
                for(var k=0;k<fieldTypeList.length;k++){
                    if(fieldTypeList[k].isParent){
                            fieldTypeList[k].open=false;
                            treeObj.updateNode(fieldTypeList[k]);
                    }
                }
                integrity=null;
                IntegrityFalg = !IntegrityFalg;
            }
            myBtnClick($("#integrity"));
        }

        function addFunc(){
            var addTree=$.fn.zTree.getZTreeObj("myDemo");
            var chooseList = addTree.getSelectedNodes();

            if(chooseList.length==0){
                alert("请选择要增加用户自定义字段的节点");
            }else{
                if($.fn.zTree.getZTreeObj("myDemo").getNodesByParam("fieldType","userField").length>9){
                    alert("用户自定义字段已达上限");
                }else{

                    var addNode=chooseList[0];
                    console.log(addNode);
                    var root=addTree.getNodeByParam("pid","0");

                    var newNode={
                        id:"diy"+$.fn.zTree.getZTreeObj("myDemo").getNodesByParam("fieldType","userField").length,
                        name:"用户自定义字段",
                        fieldType: "userField",
                        font:{'color':'#9400D3'},
                        isParent:false,
                        funcType:"customFuncField"
                    };
                    if(addNode.fieldType=="root"){
                        addTree.addNodes(root,0,newNode);
                    }else{
                        addTree.updateNode(addNode);
                        addTree.addNodes(addNode.getParentNode(),(addNode.getIndex()+1),newNode);
                    }

                }


            }
        }

        function removeFunc(){
            var remTree=$.fn.zTree.getZTreeObj("myDemo");
            var selectedNodes = remTree.getSelectedNodes();
            if(selectedNodes.length==0 || selectedNodes[0].fieldType!="userField"){
                alert("请选择一个用户自定义字段");
                return;
            }else{
                if(confirm("确认删除" + selectedNodes[0].name + " 吗？")){
                    var parentNode=selectedNodes[0].getParentNode();
                    remTree.updateNode(parentNode);
                    remTree.removeNode(selectedNodes[0]);
                }else{
                    return;
                }


            }
        }

        function checkFuncField(){
            $("#protocolName").val("");
            $("#protocolInfo").val("");
            var treeObj=$.fn.zTree.getZTreeObj("myDemo");
            var nodesList = treeObj.transformToArray(treeObj.getNodes());
            var flag=false;
            var funcList=new Array();
            for(var i=0;i<nodesList.length;i++){
                var node=nodesList[i]
                if(node.funcType!=undefined){
                    var thisFuncType=node.funcType;
                    if(thisFuncType!="customFuncField"){

                        if(funcList.indexOf(thisFuncType)==-1){
                            funcList.push(thisFuncType);
                        }else{
                            flag=true;
                            var tip="";
                            switch (thisFuncType) {
                                case "encryTag":tip="加密标识字段"; break;
                                case "encryAlgField":tip="加密方法字段"; break;
                                case "encryAreaField":tip="加密区域字段"; break;
                                case "encryModel":tip="加密模式字段"; break;
                                case "encryOutputField":tip="加密输出字段"; break;
                                case "encryResField":tip="加密结果字段"; break;
                                case "virusTag":tip="防病毒标识字段"; break;
                                case "virusMethodField":tip="防病毒方法字段"; break;
                                case "IntegrityTag":tip="完整性标识字段"; break;
                                case "IntegrityValField":tip="完整性校验值字段"; break;
                                case "IntegrityResField":tip="完整性校验结果字段"; break;
                                case "IntegrityMethodField":tip="完整性校验方法字段"; break;
                                case "exceptionTag":tip="异常标识字段"; break;
                                case "exceptionMethodField":tip="异常检测方法字段"; break;
                                case "exceptionValField":tip="异常检测值字段"; break;
                                case "exceptionResField":tip="异常检测结果字段"; break;
                                case "overtimeCheckField":tip="超时检测标识字段"; break;
                                case "communicationResField":tip="通信状态指示位字段"; break;
                                case "timeSignField":tip="时间戳标识字段"; break;
                                case "resendUniqueField":tip="重传唯一性标识字段"; break;
                                case "replayCheckField":tip="重放检测标识字段"; break;
                                case "resendCheckField":tip="重传检测标识字段"; break;
                                case "customFuncField":tip="自定义功能字段"; break;
                                default: tip="未识别字段";
                            }

                            alert("字段类型:"+tip+" 重复，请检查后再保存");
                            break;
                        }
                    }
                }
            }
            if(!flag){
                afterCheckFuncField();
            }else{
                return;
            }
        }


        $(document).ready(function () {

            var treeObj=$.fn.zTree.init($("#myDemo"), setting, myPro);
            //id计数
            count = treeObj.transformToArray(treeObj.getNodes()).length;

            $("#identity").bind("click", identityFunc);
            $("#encryption").bind("click", encrytionFunc);
            $("#exception").bind("click", exceptionFunc);
            $("#defend").bind("click", defendFunc);
            $("#resend").bind("click", resendFunc);
            $("#integrity").bind("click", integrityFunc);

            $("#addBtn").bind("click", addFunc);
            $("#removeBtn").bind("click", removeFunc);
            $("#mysave").bind("click",checkFuncField);
        });


    </script>

    <style>
        #protocolBody {
            width: 90%;
            padding: 15px 15px 20px 40px;
            margin-top: 40px;
            margin-left: 25px;
            margin-bottom: 20px;
        }

        #protocolBody img {
            margin-left: 30px;
            margin-top: 10px;
            width: 60%;
            height: 60%;
        }

        #protocolBody button {
            margin-top: 15px;
            border: 1px solid rgba(0, 0, 0, 0.7);
            border-radius: 5px;
        }

        #newProtocol {
            margin: 40px auto;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
            width: 95%;
            height: 750px;
        }

        #left {
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;

            margin: 2% 5% 0 5%;
            padding: 20px;
            display: inline-block;
            width: 43%;
            height: 90%;
            overflow: scroll;
        }

        #left:hover {
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        }

        #left p {
            display: inline-block;
            font-size: 13px;
        }

        #right {
            float: right;
            margin-top: 2%;
            margin-right: 5%;
            padding: 20px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            display: inline-block;
            width: 40%;
            height: 90%;
        }

        #right:hover {
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        }

        .fieldDesign {
            margin: 5px auto;
            width: 45%;
            height: 5%;
            font-size: 15px;
            display: inline-block;
        }

        .fieldDesign input {
            width: 90%;
            border: 1px solid rgba(0, 0, 0, 0.2);
            line-height: normal;
            text-align: left;
            border-radius: 5px;
        }

        .fieldDesign select {
            border-radius: 5px;
            height: 25px;
            width: 90%;
        }

        .fieldDesignButton {
            float: right;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            margin-top: 10px;
            margin-right: 2%;
            width: 15%;
            padding: 3px;
            font-size: 10px;
        }

        .fieldDesignButton:hover {
            box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
        }


        /*ztree*/
        .ztree li span.button.switch.level0 {
            visibility: hidden;
            width: 1px;
        }

        .ztree li ul.level0 {
            padding: 0;
            background: none;
        }

        .ztree * {
            font-size: 16px;
        }
    </style>


</head>

<body>
<div class="view-topbar">
    <div class="topbar-console">
        <div class="tobar-head fl">
            <a href="#" class="topbar-home-link topbar-btn text-center fl">
                <img src="images/dwlogo.png"  class="logoimg"/>
            </a>
            <div  class="mynav" >
                <span>电力监控协议安全设计工具</span>
            </div>
        </div>
    </div>
    <div class="topbar-info">
        <ul class="fr">
            <li class="fl topbar-info-item">
                <div class="dropdown">
                    <a href="#" class="topbar-btn">
                        <span class="fl text-normal"><span class="username"></span> </span>
                        <span class="icon-arrow-down"></span>
                    </a>
                    <ul class="dropdown-menu topbar-btn-fontsize">
                        <li>
                            <a id="logout">退出</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="view-body">
    <div class="view-sidebar">
        <div class="sidebar-content">
            <div class="sidebar-nav sidebar-nav-fold operator-nav">
                <div class="sidebar-title ">
                    <a href="javascript:void(0)" id="viewProtocol">
                        <span class="icon"><b class="fl icon-arrow-down"></b></span>
                        <span class="text-normal">协议预览</span>
                    </a>
                </div>
                <ul class="sidebar-trans" >
                    <li id="preview101">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC60870-5-101</span>
                        </a>
                    </li>
                    <li id="preview104">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC60870-5-104</span>
                        </a>
                    </li>
                    <li id="previewgoose">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-GOOSE</span>
                        </a>
                    </li>
                    <li id="previewsv">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-SV</span>
                        </a>
                    </li>
                    <li id="previewmms">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-MMS</span>
                        </a>
                    </li>
                    <li id="previewdnp3">
                        <a href="previewDNP3.html">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">DNP3</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="sidebar-nav operator-nav">
                <div class="sidebar-title">
                    <a href="#" id="designProtocol">
                        <span class="text-normal ml-5 mloader" >协议设计</span>
                    </a>
                </div>
            </div>

            <div class="sidebar-nav operator-nav">
                <div class="sidebar-title">
                    <a href="#" id="testProtocol" >
                        <span class="text-normal ml-5">协议测试</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="view-product">
        <div class="content-header">
            <ol class="breadcrumb">
                <li>
                    <a href="index.html" title="主页"><i class="fa fa-home"> 主页</i> </a>
                </li>
                <li>
                    <a href="designProtocol.html" title="返回上级"> 协议设计</a>
                </li>
                <li>新建设计</li>
            </ol>
        </div>
        <div class="message-manage">
            <div class="manage-record margin-lr">

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="identity" class="next" style="font-family: '微软雅黑';"><i
                            class="fa fa-handshake-o fa-lg"></i> 认证协商
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="encryption" class="next" style="font-family: '微软雅黑';"><i class="fa fa-key fa-lg"></i>
                        数据加密
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="exception" class="next" style="font-family: '微软雅黑';"><i class="fa fa-wrench fa-lg"></i>
                        异常检测
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="defend" class="next" style="font-family: '微软雅黑';"><i class="fa fa-shield fa-lg"></i>
                        防病毒设计
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="resend" class="next" style="font-family: '微软雅黑';"><i class="fa fa-upload fa-lg"></i>
                        重传及防重放
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="integrity" class="next" style="font-family: '微软雅黑';"><i
                            class="fa fa-paint-brush fa-lg"></i> 完整性校验
                    </button>
                </div>


            </div>

            <div style="float: right;margin-top: -35px;">
                <div style="display: inline-block;margin-right: 15px;">
                    <a href="javascript:void(0)" id="mysave" class="next" style="font-family: '微软雅黑';">
                        <i class="fa fa-save fa-lg"></i> 点击保存
                    </a>
                </div>
            </div>

            <div id="newProtocol">

                <div id="left">

                    <div style="margin-bottom: 10px">
                        <li class="fa fa-hand-o-right fa-2x"></li> <p>点击顶部功能栏的按钮，对协议进行安全设计，保存后进行协议具体配置:</p>
                        <br>
                        <div style="display: inline-block;margin-right: 15px;margin-top: 10px;margin-bottom: 5px" class="attrButton">
                            <button id="addBtn" class="next" style="font-family: '微软雅黑';border-radius: 10px"><i
                                    style="color: forestgreen;" class="fa fa-plus-square fa-lg"></i> 增加用户自定义字段
                            </button>
                        </div>

                        <div style="display: inline-block;margin-right: 15px;margin-top: 10px;margin-bottom: 5px" class="attrButton">
                            <button id="removeBtn" class="next" style="font-family: '微软雅黑';border-radius: 10px"><i
                                    style="color: red;"  class="fa fa-times-circle fa-lg"></i> 移除用户自定义字段
                            </button>
                        </div>
                    </div>
                    <hr>
                    <ul id="myDemo" class="ztree"></ul>

                </div>

                <div id="right">
                    <!--原有报文-->
                    <h1 style="color: rgb(99, 194, 222);">原有DNP3报文格式</h1>
                    <img src="images/DNP3/dnp3-1.png" style="display: block;width: 65%;height: 65%;margin:5px auto">
                    <hr/>

                    <div style="margin-top: 20px;" id="fieldArea">

                        <div class="fieldDesign">
                            <label for="fieldName" class="control-label"><span style="color: red;">*</span>字段名称：</label>
                            <input type="text" disabled name="fieldName" id="fieldName" maxlength="10" value="" placeholder="必填项(字数不超过10)">
                        </div>
                        <div class="fieldDesign">
                            <label for="description" class="control-label">字段说明：</label>
                            <input type="text" disabled name="description" maxlength="20" id="description" value="" placeholder="选填项(字数不超过20)">
                        </div>
                        <div class="fieldDesign">
                            <label for="funcType" class="control-label"><span style="color: red;">*</span>功能类型：</label>
                            <select id="funcType" disabled>
                                <option value="null" disabled selected>请选择字段的功能类型</option>
                                <option value="encryTag" id="encryTag">加密标识字段</option>
                                <option value="encryAlgField" id="encryAlgField">加密算法字段</option>
                                <option value="encryAreaField" id="encryAreaField">加密区域字段</option>
                                <option value="encryOutputField" id="encryOutputField">加密输出字段</option>
                                <option value="encryResField" id="encryResField">加密结果字段</option>
                                <option value="virusTag" id="virusTag">防病毒标识字段</option>
                                <option value="virusMethodField" id="virusMethodField">防病毒方法字段</option>
                                <option value="IntegrityTag" id="IntegrityTag">完整性标识字段</option>
                                <option value="IntegrityValField" id="IntegrityValField">完整性校验值字段</option>
                                <option value="IntegrityResField" id="IntegrityResField">完整性校验结果字段</option>
                                <option value="IntegrityMethodField" id="IntegrityMethodField">完整性校验方法字段</option>
                                <option value="exceptionTag" id="exceptionTag">异常标识字段</option>
                                <option value="exceptionMethodField" id="exceptionMethodField">异常检测方法字段</option>
                                <option value="exceptionValField" id="exceptionValField">异常检测值字段</option>
                                <option value="exceptionResField" id="exceptionResField">异常检测结果字段</option>
                                <option value="replayCheckField" id="replayCheckField">重放检测标识字段</option>
                                <option value="resendCheckField" id="resendCheckField">重传检测标识字段</option>
                                <option value="resendUniqueField" id="resendUniqueField">重传唯一性标识字段</option>
                                <option value="overtimeCheckField" id="overtimeCheckField">超时检测标识字段</option>
                                <option value="communicationResField" id="communicationResField">通信状态指示位字段</option>
                                <option value="timeSignField" id="timeSignField">时间戳标识字段</option>
                                <option value="customFuncField" id="customFuncField">自定义功能字段</option>
                            </select>
                        </div>

                        <div class="fieldDesign">
                            <label for="fieldType" class="control-label">字段类型：</label>
                            <select id="fieldType" disabled>
                                <option value="null" selected >-----------------------------------</option>
                                <option value="fixedFiled" id="fixedField">协议固定字段(自动判定)</option>
                                <option value="customFiled" id="customField">推荐自定义字段(自动判定)</option>
                                <option value="userField" id="userField">用户自定义字段(自动判定)</option>
                            </select>
                        </div>
                        <button class="fieldDesignButton" disabled id="fieldBtn"><i class="fa fa-arrow-right fa-1x"></i> 确认
                        </button>
                    </div>


                </div>
            </div>




            <div class="offcial-table margin-top clearfix clear" style="display: none">
                <div class="offcial-table tr-border margin-big-top clearfix" id="design_protocol">
                </div>
            </div>

        </div>

    </div>

</div>

<!--保存-协议名 备注-->
<div style="display: none;">
    <div id="saveField" class="easyui-dialog" closed="true" data-options="iconCls:'icon-save '" title="新建协议设计"
         style="width:80%;max-width:800px;min-height:200px;padding:20px">
        <h3 style="text-align: center;">新建协议设计</h3>
        <div class="offcial-table margin-top clearfix" style="margin: 20px;">
            <div id="designName" style="margin-left: 70px;">
                安全电力协议名: <input type="" name="protocolName" id="protocolName" value="" maxlength="10" placeholder="安全电力协议名(必填,字数不能超过10)"
                                style="border: 1px solid rgb(180,180,180);display: inline;width: 70%;line-height: 20px;"/>
                <i style="color: red;font-size: 20px;">*</i>
            </div>
            <div id="designInfo" style="margin-left: 70px;">
                协议的备注信息: <input type="" name="protocolInfo" id="protocolInfo" value="" maxlength="20" placeholder="备注信息(字数不能超过20)"
                                style="border: 1px solid rgb(180,180,180);display: inline;width: 70%;line-height: 20px;"/>
            </div>

        </div>
        <div style="display: inline-block;margin-right: 15px;float: right;">
            <a href="javascript:void(0)" id="saveField_save" class="next" style="font-family: '微软雅黑';">
                <i class="fa fa-save fa-lg"></i> 点击保存
            </a>
        </div>
        <div style="display: inline-block;margin-right: 15px;float: right;">
            <a href="javascript:void(0)" id="saveField_reset" class="next" style="font-family: '微软雅黑';">
                <i class="fa fa-reply fa-lg"></i> 点击重置
            </a>
        </div>

    </div>
</div>

</body>
<script>
    $(function(){
        $.get("topbar.html",function (data) {
            $(".view-topbar").empty();
            $(".view-topbar").html(data);
        });
        $.get("siderbar.html", function(data) {
            $(".view-sidebar").empty();
            $(".view-sidebar").html(data);
            $("#designProtocol").css("background","#40BEA6");
        });
    });
    checkRole('operator');
</script>

</html>